<template>
  <div class="relative z-50 mx-auto font-[Jost]">
    <button @click="showDrawer = true" class="px-4 py-2 leading-4 text-neutral-500 bg-white cursor-pointer text-base min-w-[120px]">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="inline align-bottom mr-1" viewBox="0 0 16 16">
        <path
          d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
        />
      </svg>
      <span v-if="selectedRegion">
        {{ selectedRegion }}
      </span>
      <span v-else><%location:regionSelector.select_region%></span>
    </button>

    <Transition name="drawer">
      <div v-if="showDrawer" class="fixed inset-0 bg-black bg-opacity-50 z-40" @click="showDrawer = false">
        <div class="fixed bottom-0 left-0 w-full max-h-[100vh] bg-white overflow-y-auto transform transition-all duration-300" @click.stop>
          <div class="max-w-[900px] mx-auto pt-20 pb-32 px-6">
            <div class="mb-5">
              <h2 class="text-3xl font-medium text-center"><%location:regionSelector.select_region_title%></h2>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="40"
                height="40"
                fill="currentColor"
                class="absolute top-10 right-10 cursor-pointer hover:scale-110 duration-100"
                viewBox="0 0 16 16"
                @click="showDrawer = false"
              >
                <path
                  d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z"
                />
              </svg>
            </div>

            <div class="flex flex-col space-y-6">
              <div class="flex flex-col space-y-3" v-for="(group, region) in regions" :key="region">
                <h3 class="text-2xl font-bold text-gray-800">{{ region }}</h3>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 md:grid-cols-auto-fill gap-3">
                  <button
                    v-for="item in group"
                    :key="item.value"
                    class="flex flex-col justify-center items-center text-2xl p-3 border rounded-lg bg-white cursor-pointer transition-all duration-300"
                    :class="{ 'border-blue-500 bg-blue-50': selectedRegion === item.label, 'border-gray-200 hover:border-blue-500': selectedRegion !== item.label }"
                    @click="selectRegion(item.label)"
                  >
                    {{ item.label }}
                    <span v-if="item.lang" class="text-xs text-gray-500 mt-1">{{ item.lang }}</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from "vue";

const showDrawer = ref(false);
const selectedRegion = ref("");

const regions = _WPCC_GET_DATAS("array:component.regionSelector.regions()");

const selectRegion = (region) => {
  selectedRegion.value = region;
  showDrawer.value = false;
};
</script>

<style>
.drawer-enter-active,
.drawer-leave-active {
  transition: all 0.3s ease-out;
}

.drawer-enter-from,
.drawer-leave-to {
  opacity: 0;
}

.drawer-enter-from .fixed,
.drawer-leave-to .fixed {
  transform: translateY(100%);
}

.drawer-enter-to,
.drawer-leave-from {
  opacity: 1;
}

.drawer-enter-to .fixed,
.drawer-leave-from .fixed {
  transform: translateY(0);
}
</style>
